<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>跨境电商卖家论坛小程序 - 组件展示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Roboto", "Noto Sans SC", sans-serif;
            background-color: #F7F8FA;
            color: #1D2129;
            padding: 32px;
            line-height: 1.6;
        }

        .container {
            max-width: 750px;
            margin: 0 auto;
        }

        h1 {
            font-size: 32px;
            font-weight: 600;
            color: #1D2129;
            margin-bottom: 48px;
        }

        h2 {
            font-size: 28px;
            font-weight: 600;
            color: #1D2129;
            margin-top: 48px;
            margin-bottom: 24px;
        }

        h3 {
            font-size: 24px;
            font-weight: 600;
            color: #1D2129;
            margin-top: 32px;
            margin-bottom: 16px;
        }

        .section {
            background: #FFFFFF;
            border-radius: 8px;
            padding: 32px;
            margin-bottom: 32px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .component-group {
            margin-bottom: 32px;
        }

        .component-group:last-child {
            margin-bottom: 0;
        }

        .label {
            font-size: 28px;
            color: #86909C;
            margin-bottom: 16px;
        }

        /* ========== 按钮组件 ========== */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
            font-family: inherit;
        }

        /* 按钮尺寸 */
        .btn-large {
            height: 88px;
            padding: 0 48px;
            font-size: 32px;
        }

        .btn-medium {
            height: 72px;
            padding: 0 40px;
            font-size: 28px;
        }

        .btn-small {
            height: 56px;
            padding: 0 32px;
            font-size: 24px;
        }

        /* 主要按钮 */
        .btn-primary {
            background-color: #165DFF;
            color: #FFFFFF;
        }

        .btn-primary:hover {
            background-color: #4080FF;
        }

        .btn-primary:active {
            background-color: #0E42D2;
        }

        .btn-primary:disabled {
            background-color: #F2F3F5;
            color: #C9CDD4;
            cursor: not-allowed;
        }

        /* 次要按钮 */
        .btn-secondary {
            background-color: #FFFFFF;
            color: #165DFF;
            border: 1px solid #165DFF;
        }

        .btn-secondary:hover {
            background-color: #E8F3FF;
        }

        .btn-secondary:active {
            background-color: #D6E7FF;
        }

        .btn-secondary:disabled {
            background-color: #F7F8FA;
            color: #C9CDD4;
            border-color: #E5E6EB;
            cursor: not-allowed;
        }

        /* 文字按钮 */
        .btn-text {
            background-color: transparent;
            color: #165DFF;
            padding: 0 16px;
        }

        .btn-text:hover {
            background-color: #E8F3FF;
        }

        .btn-text:active {
            background-color: #D6E7FF;
        }

        .btn-text:disabled {
            color: #C9CDD4;
            cursor: not-allowed;
        }

        /* 危险按钮 */
        .btn-danger {
            background-color: #F53F3F;
            color: #FFFFFF;
        }

        .btn-danger:hover {
            background-color: #FF6B6B;
        }

        .btn-danger:active {
            background-color: #D92B2B;
        }

        .btn-danger:disabled {
            background-color: #F2F3F5;
            color: #C9CDD4;
            cursor: not-allowed;
        }

        .button-demo {
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: stretch;
        }

        .button-demo .btn {
            width: 100%;
        }

        /* ========== 输入框组件 ========== */
        .input-wrapper {
            margin-bottom: 24px;
        }

        .input-label {
            font-size: 28px;
            color: #1D2129;
            margin-bottom: 8px;
            display: block;
        }

        .input-label .required {
            color: #F53F3F;
            margin-left: 4px;
        }

        .input-field {
            width: 100%;
            height: 88px;
            padding: 0 32px;
            font-size: 28px;
            color: #1D2129;
            background-color: #FFFFFF;
            border: 1px solid #E5E6EB;
            border-radius: 8px;
            transition: all 0.3s;
            font-family: inherit;
        }

        .input-field::placeholder {
            color: #86909C;
            font-size: 28px;
        }

        .input-field:focus {
            outline: none;
            border-color: #165DFF;
        }

        .input-field:disabled {
            background-color: #F7F8FA;
            border-color: #E5E6EB;
            color: #C9CDD4;
            cursor: not-allowed;
        }

        .input-field.error {
            border-color: #F53F3F;
        }

        .input-error {
            font-size: 24px;
            color: #F53F3F;
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .input-error::before {
            content: "⚠";
            font-size: 24px;
        }

        .input-count {
            font-size: 24px;
            color: #86909C;
            text-align: right;
            margin-top: 8px;
        }

        .input-count.over-limit {
            color: #F53F3F;
        }

        .input-demo-group {
            display: grid;
            gap: 24px;
        }

        /* ========== 弹窗组件 ========== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal-overlay.show {
            display: flex;
        }

        .modal {
            background: #FFFFFF;
            border-radius: 8px;
            width: 90%;
            max-width: 600px;
            max-height: 60vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .modal-header {
            padding: 32px;
            border-bottom: 1px solid #F2F3F5;
        }

        .modal-title {
            font-size: 32px;
            font-weight: 600;
            color: #1D2129;
        }

        .modal-body {
            padding: 32px;
            overflow-y: auto;
            flex: 1;
        }

        .modal-footer {
            padding: 32px;
            border-top: 1px solid #F2F3F5;
            display: flex;
            gap: 24px;
            height: 112px;
            align-items: center;
        }

        .modal-footer .btn {
            flex: 1;
        }

        /* ========== 列表组件 ========== */
        .list-item {
            display: flex;
            align-items: center;
            padding: 24px 0;
            border-bottom: 1px solid #F2F3F5;
        }

        .list-item:last-child {
            border-bottom: none;
        }

        .list-item-image {
            width: 96px;
            height: 96px;
            border-radius: 8px;
            background: #F2F3F5;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #86909C;
            font-size: 24px;
        }

        .list-item-content {
            flex: 1;
            margin-left: 24px;
        }

        .list-item-title {
            font-size: 28px;
            color: #1D2129;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .list-item-desc {
            font-size: 24px;
            color: #86909C;
            line-height: 1.5;
        }

        .list-demo {
            background: #FFFFFF;
            border-radius: 8px;
            padding: 0 32px;
        }

        /* ========== Toast 组件 ========== */
        .toast {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: #FFFFFF;
            padding: 24px 32px;
            border-radius: 8px;
            font-size: 28px;
            z-index: 2000;
            display: none;
            animation: toastFadeIn 0.3s;
        }

        .toast.show {
            display: block;
        }

        @keyframes toastFadeIn {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        /* ========== Message 组件 ========== */
        .message {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #FFFFFF;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 24px 32px;
            z-index: 2000;
            display: none;
            animation: messageSlideIn 0.3s;
        }

        .message.show {
            display: block;
        }

        .message-success {
            border-left: 4px solid #00B42A;
        }

        .message-warning {
            border-left: 4px solid #FF7D00;
        }

        .message-error {
            border-left: 4px solid #F53F3F;
        }

        .message-info {
            border-left: 4px solid #165DFF;
        }

        .message-content {
            font-size: 28px;
            color: #1D2129;
        }

        @keyframes messageSlideIn {
            from {
                transform: translateY(-100%);
            }
            to {
                transform: translateY(0);
            }
        }

        /* ========== ActionSheet 组件 ========== */
        .actionsheet-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: flex-end;
            justify-content: center;
            z-index: 1000;
        }

        .actionsheet-overlay.show {
            display: flex;
        }

        .actionsheet {
            background: #FFFFFF;
            border-radius: 24px 24px 0 0;
            width: 100%;
            max-width: 750px;
            animation: actionsheetSlideUp 0.3s;
        }

        .actionsheet-item {
            height: 112px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #F2F3F5;
            font-size: 28px;
            color: #1D2129;
            cursor: pointer;
        }

        .actionsheet-item:last-child {
            border-bottom: none;
        }

        .actionsheet-cancel {
            margin-top: 16px;
            border-top: 8px solid #F7F8FA;
        }

        @keyframes actionsheetSlideUp {
            from {
                transform: translateY(100%);
            }
            to {
                transform: translateY(0);
            }
        }

        /* 响应式适配 */
        @media (max-width: 414px) {
            body {
                padding: 16px;
            }

            h1 {
                font-size: 24px;
                margin-bottom: 32px;
            }

            h2 {
                font-size: 20px;
                margin-top: 32px;
                margin-bottom: 16px;
            }

            .section {
                padding: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>跨境电商卖家论坛小程序 - 组件展示</h1>

        <!-- 按钮组件 -->
        <div class="section">
            <h2>6.1 按钮（Button）</h2>

            <!-- 按钮尺寸 -->
            <div class="component-group">
                <h3>尺寸规格</h3>
                <div class="label">大按钮 / 中按钮 / 小按钮</div>
                <div class="button-demo">
                    <button class="btn btn-primary btn-large">大按钮</button>
                    <button class="btn btn-primary btn-medium">中按钮</button>
                    <button class="btn btn-primary btn-small">小按钮</button>
                </div>
            </div>

            <!-- 按钮状态 -->
            <div class="component-group">
                <h3>状态样式</h3>
                <div class="label">Normal / Hover / Pressed / Disabled</div>
                <div class="button-demo">
                    <button class="btn btn-primary btn-medium">默认状态</button>
                    <button class="btn btn-primary btn-medium" disabled>禁用状态</button>
                </div>
            </div>

            <!-- 按钮类型 -->
            <div class="component-group">
                <h3>按钮类型</h3>
                <div class="label">主要按钮 / 次要按钮 / 文字按钮 / 危险按钮</div>
                <div class="button-demo">
                    <button class="btn btn-primary btn-medium">主要按钮</button>
                    <button class="btn btn-secondary btn-medium">次要按钮</button>
                    <button class="btn btn-text btn-medium">文字按钮</button>
                    <button class="btn btn-danger btn-medium">危险按钮</button>
                </div>
            </div>
        </div>

        <!-- 输入框组件 -->
        <div class="section">
            <h2>6.2 输入框（Input Field）</h2>

            <!-- 输入框状态 -->
            <div class="component-group">
                <h3>状态样式</h3>
                <div class="input-demo-group">
                    <!-- 默认状态 -->
                    <div class="input-wrapper">
                        <label class="input-label">默认状态</label>
                        <input type="text" class="input-field" placeholder="请输入内容">
                    </div>

                    <!-- 输入中状态 -->
                    <div class="input-wrapper">
                        <label class="input-label">输入中状态（聚焦）</label>
                        <input type="text" class="input-field" placeholder="请输入内容" value="正在输入...">
                    </div>

                    <!-- 禁用状态 -->
                    <div class="input-wrapper">
                        <label class="input-label">禁用状态</label>
                        <input type="text" class="input-field" placeholder="禁用输入框" disabled>
                    </div>

                    <!-- 错误状态 -->
                    <div class="input-wrapper">
                        <label class="input-label">错误状态</label>
                        <input type="text" class="input-field error" placeholder="请输入内容" value="错误输入">
                        <div class="input-error">请输入正确的格式</div>
                    </div>

                    <!-- 带必填标识 -->
                    <div class="input-wrapper">
                        <label class="input-label">
                            手机号
                            <span class="required">*</span>
                        </label>
                        <input type="text" class="input-field" placeholder="请输入手机号">
                    </div>

                    <!-- 带字数限制 -->
                    <div class="input-wrapper">
                        <label class="input-label">帖子标题</label>
                        <input type="text" class="input-field" placeholder="请输入标题" maxlength="50" id="titleInput">
                        <div class="input-count">
                            <span id="titleCount">0</span>/50
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 弹窗组件 -->
        <div class="section">
            <h2>6.3 弹窗（Modal）</h2>

            <div class="component-group">
                <h3>基础弹窗</h3>
                <div class="label">点击按钮查看弹窗效果</div>
                <div class="button-demo">
                    <button class="btn btn-primary btn-medium" onclick="showModal()">打开弹窗</button>
                </div>
            </div>
        </div>

        <!-- 列表组件 -->
        <div class="section">
            <h2>6.5 列表/List</h2>

            <div class="component-group">
                <h3>左图右文布局</h3>
                <div class="label">标准间距：24px（12px 实际）</div>
                <div class="list-demo">
                    <div class="list-item">
                        <div class="list-item-image">图</div>
                        <div class="list-item-content">
                            <div class="list-item-title">帖子标题示例</div>
                            <div class="list-item-desc">这是帖子的描述内容，可以展示更多详细信息...</div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="list-item-image">图</div>
                        <div class="list-item-content">
                            <div class="list-item-title">另一个帖子标题</div>
                            <div class="list-item-desc">这是另一个帖子的描述内容...</div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="list-item-image">图</div>
                        <div class="list-item-content">
                            <div class="list-item-title">第三个帖子标题</div>
                            <div class="list-item-desc">这是第三个帖子的描述内容...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Toast、Message、ActionSheet -->
        <div class="section">
            <h2>6.6 Toast、Message、ActionSheet</h2>

            <div class="component-group">
                <h3>Toast 提示</h3>
                <div class="label">屏幕中央偏上显示</div>
                <div class="button-demo">
                    <button class="btn btn-primary btn-medium" onclick="showToast('操作成功')">成功提示</button>
                    <button class="btn btn-danger btn-medium" onclick="showToast('操作失败')">错误提示</button>
                </div>
            </div>

            <div class="component-group">
                <h3>Message 消息</h3>
                <div class="label">页面顶部显示</div>
                <div class="button-demo">
                    <button class="btn btn-primary btn-medium" onclick="showMessage('success', '操作成功')">成功消息</button>
                    <button class="btn btn-primary btn-medium" onclick="showMessage('warning', '请注意')">警告消息</button>
                    <button class="btn btn-primary btn-medium" onclick="showMessage('error', '操作失败')">错误消息</button>
                    <button class="btn btn-primary btn-medium" onclick="showMessage('info', '提示信息')">信息消息</button>
                </div>
            </div>

            <div class="component-group">
                <h3>ActionSheet 操作面板</h3>
                <div class="label">屏幕底部显示</div>
                <div class="button-demo">
                    <button class="btn btn-primary btn-medium" onclick="showActionSheet()">打开操作面板</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 弹窗蒙层 -->
    <div class="modal-overlay" id="modalOverlay" onclick="closeModal(event)">
        <div class="modal" onclick="event.stopPropagation()">
            <div class="modal-header">
                <div class="modal-title">弹窗标题</div>
            </div>
            <div class="modal-body">
                <p style="font-size: 28px; color: #4E5969; line-height: 1.6;">
                    这是弹窗的内容区域。当内容超出最大高度时，会自动显示滚动条。
                    您可以在这里放置任何需要展示的内容，包括表单、列表、图片等。
                </p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary btn-medium" onclick="closeModal()">取消</button>
                <button class="btn btn-primary btn-medium" onclick="closeModal()">确认</button>
            </div>
        </div>
    </div>

    <!-- Toast 提示 -->
    <div class="toast" id="toast"></div>

    <!-- Message 消息 -->
    <div class="message" id="message">
        <div class="message-content" id="messageContent"></div>
    </div>

    <!-- ActionSheet 操作面板 -->
    <div class="actionsheet-overlay" id="actionsheetOverlay" onclick="closeActionSheet(event)">
        <div class="actionsheet" onclick="event.stopPropagation()">
            <div class="actionsheet-item" onclick="handleAction('选项1')">选项1</div>
            <div class="actionsheet-item" onclick="handleAction('选项2')">选项2</div>
            <div class="actionsheet-item" onclick="handleAction('选项3')">选项3</div>
            <div class="actionsheet-item actionsheet-cancel" onclick="closeActionSheet()">取消</div>
        </div>
    </div>

    <script>
        // 字数统计功能
        const titleInput = document.getElementById('titleInput');
        const titleCount = document.getElementById('titleCount');
        const countElement = titleCount?.parentElement;

        if (titleInput && titleCount) {
            titleInput.addEventListener('input', function() {
                const length = this.value.length;
                titleCount.textContent = length;
                
                if (length > 50) {
                    countElement.classList.add('over-limit');
                } else {
                    countElement.classList.remove('over-limit');
                }
            });
        }

        // 输入框聚焦效果演示
        document.querySelectorAll('.input-field').forEach(input => {
            input.addEventListener('focus', function() {
                if (!this.disabled && !this.classList.contains('error')) {
                    this.style.borderColor = '#165DFF';
                }
            });

            input.addEventListener('blur', function() {
                if (!this.disabled && !this.classList.contains('error')) {
                    this.style.borderColor = '#E5E6EB';
                }
            });
        });

        // 弹窗功能
        function showModal() {
            document.getElementById('modalOverlay').classList.add('show');
        }

        function closeModal(event) {
            if (event && event.target !== event.currentTarget) return;
            document.getElementById('modalOverlay').classList.remove('show');
        }

        // Toast 功能
        function showToast(text) {
            const toast = document.getElementById('toast');
            toast.textContent = text;
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }

        // Message 功能
        function showMessage(type, text) {
            const message = document.getElementById('message');
            const messageContent = document.getElementById('messageContent');
            
            message.className = 'message message-' + type;
            messageContent.textContent = text;
            message.classList.add('show');
            
            setTimeout(() => {
                message.classList.remove('show');
            }, 3000);
        }

        // ActionSheet 功能
        function showActionSheet() {
            document.getElementById('actionsheetOverlay').classList.add('show');
        }

        function closeActionSheet(event) {
            if (event && event.target !== event.currentTarget) return;
            document.getElementById('actionsheetOverlay').classList.remove('show');
        }

        function handleAction(action) {
            showToast('选择了：' + action);
            closeActionSheet();
        }
    </script>
</body>
</html>
